@import "compass/css3";
@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "login/*.png";

.fix{*zoom:1;}
.fix:after,
.fix:before{
	display:block;
	content:"clear";
	height:0;
	clear:both;
	overflow:hidden;
	visibility:hidden;
}
@mixin one-line($height) {
	height: $height;
	line-height: $height;
	vertical-align: middle;
}
@mixin size($width, $height) {
	width: $width;
	height: $height;
}

input{
	border: 1px solid #ccc;
	@include border-radius(3px);
	padding: 2px;
	margin:0;
	font: 14px/1.5  Microsoft YaHei;

	&:focus {
		border-color: rgb(245, 192, 0);
		@include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px rgba(245, 192, 0, .6));
		outline: none;
	}

	&.error {
		border-color: rgb(255, 0, 0);
		@include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px rgba(255, 0, 0, .6));
		outline: none;
		color: #f00;
	}
}
html,body{height:100%;}
body{
	position: relative;
	background:#F0F0F1;
	font: 12px/1.5  Microsoft YaHei, Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}
input[type="checkbox"]{border:none;}
a{
	text-decoration: none;
	color: #666;
	&:hover{
		text-decoration: underline;
		color: #333;
	}
}
.page{
	background:#F0F0F1 image-url("bg.png") repeat-x;
	height:100%;
	.header{
		height:66px;
		.logo{
			float: left;
			.logo-img{
				@include size(279px,41px);
				margin-top:12px;
				@include inline-block;
				background:image-url("logo.png") no-repeat;
				strong{display: none;}
			}
			.logo-txt{
				font-size: 10px;
				color: #fff;
				margin:38px 0 0 8px;
				@include inline-block;
				cursor: default;
			}
		}
		.login-panel{
			float: right;
			ul{
				li{
					float: left;
					margin:25px 0 0 7px;
					position: relative;
					a{
						float: left;
						display: block;
						@include size(32px,32px);
						position: relative;
						z-index: 99;
					}
					.pulldown-list{
						visibility: hidden;
						width:110px;
						background: #fff;
						position: absolute;
						border:1px #dbdbdb solid\9;
						left:0;
						top:32px;
						@include border-radius(0px 5px 5px 5px, 0px 5px 5px 5px);
						@include box-shadow(0 0 6px #888);
						z-index: 9;
						span{
							width:100px;
							padding:5px;
							border-bottom:1px #dbdbdb dashed;
							@include one-line(46px);
							display: block;
						}
						a{
							width:100px;
							@include one-line(46px);
							display: block;
							text-align: center;
							font-size:16px;
							@include border-radius(5px);
							&:hover{
								background: #F5C118;
								text-decoration: none;
							}
						}
					}
					.qq{
						background:url(login/t_weibo.png) no-repeat;
						&:hover{background:url(login/t_weibo_hover.png) no-repeat;}
					}
					.qq.hover{
						background: #fff url(login/t_weibo.png) no-repeat;
						@include border-top-radius(5px);
						border:1px #dbdbdb solid\9;
						border-bottom:none\9;
					}
					.oops{
						background:url(login/oops.png) no-repeat;
						&:hover{background:url(login/oops_hover.png) no-repeat;}
					}
					.oops.hover{
						background: #fff url(login/oops_hover.png) no-repeat;
						@include border-top-radius(5px);
						border:1px #dbdbdb solid\9;
						border-bottom:none\9;
					}
					.sina{
						background:url(login/sina_weibo.png) no-repeat;
						&:hover{background:url(login/sina_weibo_hover.png) no-repeat;}
					}
					.sina.hover{
						background: #fff url(login/sina_weibo.png) no-repeat;
						@include border-top-radius(5px);
						border:1px #dbdbdb solid\9;
						border-bottom:none\9;
					}
					.wy{
						background:url(login/wy.png) no-repeat;
						&:hover{background:url(login/wy_hover.png) no-repeat;}
					}
					.wy.hover{
						background: #fff url(login/wy.png) no-repeat;
						@include border-top-radius(5px);
						border:1px #dbdbdb solid\9;
						border-bottom:none\9;
					}
					&:hover {
						.pulldown-list {visibility: visible;}
						.sina.login,.oops.login,.wy.login,.qq.login{
							@include border-top-radius(5px);
							border:1px #dbdbdb solid\9;
							border-bottom:none\9;
						}
						.oops.login{
							background: #fff url(login/oops.png) no-repeat;
						}
						.sina.login{
							background: #fff url(login/sina.png) no-repeat;
						}
						.qq.login{
							background: #fff url(login/qq.png) no-repeat;
						}
						.wy.login{
							background: #fff url(login/wy.png) no-repeat;
						}
					};
				}
			}
		}
	}

}
/* 搜索引擎切换 */
#search-engine{
	position: absolute;
	top:5px;
	left:5px;
	z-index: 99;
	background: #fff;
	&:hover{
		.triangle{
			border-top-color:#333;
		}
	}
	.triangle{
		position: absolute;
		top:15px;
		right:0px;
		width:1px;
		height:1px;
		border:5px #ccc solid;
		display: inline-block;
		border-left:5px #f0f0f1 solid;
		border-right:5px #f0f0f1 solid;
		border-bottom:5px #f0f0f1 solid;
	}
	.divide{
		width:1px;
		height:41px;
		border-right:1px #ccc solid;
		display: inline-block;
		position: absolute;
		left:95px;
		top:-4px;
	}
	.eng-list{

		width:96px;
		margin-top:4px;
		a{
			width:95px;
			height:31px;
			line-height: 31px;
			text-align: center;
			display: block;
			border:1px #dbdbdb solid;
			border-bottom:none;
			border-top:none;
			background: #fff;
			font-size: 14px;
			&:hover{
				text-decoration: none;
				background: #ffa800;
			}
		}
	}
	.engine-toggle{
		width:82px;
		height:33px;
		line-height: 33px;
		text-align: center;
		display: block;
		font-size: 14px;
		position: relative;
	}
}

.search-panel{
	@include size(570px,200px);
	width:590px\9;/*针对IE8修复*/
	position: absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -285px;
	.flowy-logo{
		width:257px;
		height:81px;
		margin-left:130px;
		margin-bottom:35px;
		background:image-url("flowy.png") no-repeat;
		strong{display: none;}
	}
	.search{
		position: relative;
		input{
			width:344px;
			padding:10px;
			padding-left:110px;
			margin:0;
			float: left;
			@include border-radius(6px);
		}
		.search-btn{
			width:80px;
			@include one-line(42px);
			text-align: center;
			background: #262626;
			font-size: 16px;
			font-weight: bold;
			@include inline-block;
			margin-left:10px;
			color: #fff;
			@include border-radius(6px);
			&:hover{
				background: #404040;
				text-decoration: none;
			}
			&:active{
				@include box-shadow(#222 0 1px 4px 1px inset);
			}
		}

		.search-btn.disabled,
		.search-btn[disabled] {
		  border:1px #ccc solid;
		  cursor: default;
		  background-image: none;
		  background-color: #e6e6e6;
		  -webkit-box-shadow: none;
		  -moz-box-shadow: none;
		  box-shadow: none;
		  color:#999;
		}
	}
}
.microblog-list{
	width:1000px;
	padding:20px 0 0 10px;
	margin-left:-10px;
	@include clearfix;
	min-height:50%;
	li{
		@include size(438px,120px);
		float: left;
		padding:15px;
		margin:0 0 20px 20px;
		background: #fff;
		border:1px #fff solid;
		&:hover{
			@include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px rgba(245, 192, 0, .6));
			outline: none;
			cursor: pointer;
		}
		.microblog-panel-top{
			line-height: 14px;
			height:36px;
			display: block;
			position: relative;
			.send-succeed,.send-failed{
				float: right;
				margin: 0;
				border: none;
				color: red;
			}
			.send-failed{
				width:89px;
				height:27px;
				line-height: 27px;
				text-align: center;
				display: inline-block;
			}
			input[type="checkbox"]{
				float:right;
				margin:0;
				border:none;
			}
			.gender{margin-right: 5px}
			.header{
				@include size(27px,27px);
				img{
					display: block;
					@include size(27px,27px);
				}
				float: left;
				margin-right:10px;
			}
			.username{
				display: block;
				strong{
					font-weight: bold;
					color: #333;
				}
			}
		}
		.microblog-panel-bottom{
			height:85px;
			.microblog-content{
				@include size(340px,80px);
				float: left;
				border-top:1px #ccc dashed;
				padding-top:5px;
				line-height: 1.5em;
				.microblog-text{
					@include size(340px,65px);
					display: block;
				}
				.date-time{
					color: #999;
					float: right;
				}
			}
			.img{
				@include size(84px,84px);
				img{
					@include size(84px,84px);
				}
				float: right;
				border:1px #dbdbdb solid;
			}
		}
		.send-failed{
			width:89px;
			@include one-line(27px);
			@include inline-block;
			background: url("send-failed.png") no-repeat;
			position: absolute;
			right:-15px;
			top:-16px;
			text-align: center;
			font-size: 12px;
			color: #333;
		}
		.send-succeed{}
	}
	li.active{
		background: #ffedc0;
		border-color: rgb(245, 192, 0);
		@include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px rgba(245, 192, 0, .6));
		outline: none;
	}
}

/*筛选器*/
.screen{
	color: #fff;
	font-size: 14px;
	background:image-url("screen.png");
	padding:25px 0;
	margin-bottom:20px;
	cursor:default;
	.screen-inner{
		width:960px;
		margin:0 auto;
		.screen-l,.screen-m,.screen-r{
			float: left;
			height:70px;
			span{float: left;}
			input[type="text"]{
				background: #474747;
				border:1px #474747 solid;
				box-shadow:0px 1px 1px #202020;
				color: #999;
				padding:2px 8px;
				&:focus {
					border-color: rgb(245, 192, 0);
					@include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px rgba(245, 192, 0, .6));
					outline: none;
					background: #f9f9f9;
				}

				&.error {
					border-color: rgb(255, 0, 0);
					@include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px rgba(255, 0, 0, .6));
					outline: none;
					color: #f00;
				}
			}
			.select{
				height:40px;
				margin-right:10px;
				float: left;
				position: relative;
				.select-content{
					color: #999;
					background: #474747;
					box-shadow:0px 1px 1px #202020;
					border-radius: 5px;
					padding:3px 30px 3px 10px;
					cursor: pointer;
					float: left;
					position: relative;

					.tri{
						display:inline-block;
						width:0px;
						height:0px;
						border:5px #999 solid;
						border-right-color:#474747;
						border-left-color:#474747;
						border-bottom-color:#474747;
						position: absolute;
						right:10px;
						top:10px;
					}
				}

				ul{
					z-index:999;
					display: none;
					position: absolute;
					left:0;
					top:32px;
					border:1px #474747 solid;
					box-shadow:0px 1px 1px #202020;
					border-radius: 5px;
					max-height: 150px;
					font-size: 12px;
					overflow-x: hidden;
					overflow-y: auto;
					li{
						background: #474747;
						color: #999;
						min-width:100px;
						padding:3px 15px;
					}
					li:hover{
						color: #000;
						background: #ffc800;
					}
					li.choose{
						background: rgb(60, 57, 57);
						&:hover{color:#999;};
					}
				}
			}


		}
		.screen-l{
			width:452px;
			padding:5px 20px 0 0;
			border-right:1px #2F2F2F solid;
			p{float: left;}
			.sex{border-right: 1px #2F2F2F solid;}
			.sort{
				border-left: 1px #5A5A59 solid;
				padding-left:20px;
			}
			.screen-timeline{
				position: relative;
				top:20px;
				input[type="text"]{
					width:80px;
					margin:0 10px;
					cursor: pointer;
					float: left;
				}
			}
			label{margin-right:15px;}
			input[type="radio"]{
				@include inline-block;
				margin-top:-4px;
				border:none;
			}
			input[type="text"]{width:55px;}
			input[type="checkbox"]{
				@include inline-block;
				margin:-3px 0 0 5px;
				border:none;
			}
			#woman{margin-left:10px;}
		}
		.screen-m{
			width:275px;
			padding:5px 0 0 25px;
			border-right:1px #2F2F2F solid;
			border-left:1px #5A5A59 solid;
			.address{
				margin-top:15px;
				.select{margin:0 5px;}
				.province{width:50px;}
				.city{width:60px;}
			}
			.age{
				input{
					float: left;
					width:50px;
					margin:0 5px;
				}
			}
		}
		.screen-r{
			width:100px;
			padding:5px 0 0 25px;
			border-left:1px #5A5A59 solid;
			input[type='button']{
				width:130px;
				height:75px;
				background: #212121;
				color: #fff;
				border:none;
				margin-top:-5px;
				font-size: 24px;
				&:hover{
					cursor: pointer;
					border:1px #BB9B73 solid;
					@include box-shadow(#ffa800 0 1px 6px 0px);
				}
				&:active{
					@include box-shadow(#ffa800 0 1px 6px 0px,#000 0 1px 15px 1px inset);
				}
			}
			.hover{
				cursor: pointer;
				border:1px #BB9B73 solid;
				@include box-shadow(#ffa800 0 1px 6px 0px);
			}

			input.disabled,
			input[disabled] {
				border:1px #ccc solid;
				cursor: default;
				background-image: none;
				background-color: #e6e6e6;
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
				color:#999;
			}
		}
	}
}
/*全选*/
.check-all{
	font-size: 14px;
	strong{
		color: #F7931E;
		margin:0 5px;
		font-size: 14px;
		font-weight: bold;
	}
	input{
		@include inline-block;
		margin:-3px 5px 0 0;
	}
}
.function-btn{
	span{
		width:270px;
		@include one-line(36px);
		display: block;
		margin:0 auto;
		padding:20px 0 40px 0;
		text-align: center;
		strong{
			font-size: 16px;
			font-weight: bold;
			color: #666;
		}
		a{
			width:110px;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			color: #fff;
			background: #262626;
			border:1px #262626 solid;
			@include border-radius(5px);
			&:hover{
				background: #404040;
				text-decoration: none;
			}
			&:active{
				@include box-shadow(#333 0 1px 4px 1px inset);
			}
		}
		.more{
			float: left;
		}
		.finished{
			float: right;
		}
		.more.disabled,
		.more[disabled] {
		  border:1px #ccc solid;
		  cursor: default;
		  background-image: none;
		  background-color: #e6e6e6;
		  -webkit-box-shadow: none;
		  -moz-box-shadow: none;
		  box-shadow: none;
		  color:#999;
		}
	}
}
.push-panel{
	padding:25px 0 40px 0;
	background:image-url("screen.png");
	font-size: 14px;
	.push-inner{
		width:960px;
		margin:0 auto;
		@include clearfix;
		.word-prompt{
			width:814px;
			color: #999;
			padding-bottom:10px;
			text-align: right;
		}
		.word-over{
			color:red;
		}
		textarea{
			width:814px;
			height:80px;
			height:75px\9;
			@include border-radius(5px);
			float: left;
			resize: none;
			font: 14px/1.5  Microsoft YaHei, Tahoma;
		}
		.push-btn{
			width:130px;
			@include one-line(86px);
			@include border-radius(5px);
			margin-left:10px;
			font-size: 24px;
			float: right;
			background: #F5C000;
			text-align: center;
			color: #333;
			font-weight: bold;
			border-bottom:1px #1B1B1B solid;
			&:hover{
				text-decoration: none;
				background: #FFD45A;
			}
			&:active{
				@include box-shadow(#222 0 0 5px, #666 0 1px 4px 1px inset);
			}
		}
		.push-btn.disabled,
		.push-btn[disabled] {
		  cursor: default;
		  background-image: none;
		  background-color: #e6e6e6;
		  -webkit-box-shadow: none;
		  -moz-box-shadow: none;
		  box-shadow: none;
		  color:#999;
		}

	}
}
.copyright{
	text-align: center;
	padding:20px 0;
	color: #999;
	a{
		color: #999;
		text-decoration: underline;
	}
}
.nav{
	position: fixed;
	right:5%;
	top:50%;
	.nav-line{
		border-right:2px #f5c000 dashed;
		height:180px;
		@include inline-block;
		position: absolute;
		top:0;
		left:40px;
		z-index: 10;
	}
	li{
		position: relative;
		margin-bottom:30px;
		z-index: 999;
		a{
			width:80px;
			@include one-line(42px);
			@include inline-block;
			border-bottom:1px #bbb solid;
			text-align: center;
			color: #b3b3b3;
			background: #e6e6e6;
			@include border-radius(15px);
			font-size: 16px;
			&.now{
				color: #fff;
				background: #f5c000;
			}
			&:hover{
				text-decoration: none;
			}
		}
	}
}
.page-inner{
	width:960px;
	margin:0 auto;
}

.admin-panel{
	margin-top:30px;
	ul{
		border-top:1px #dbdbdb solid;
		@include box-shadow(0px 2px 1px #ddd);
		li{
			width:918px;
			padding:0 20px;
			@include one-line(40px);
			font-size: 14px;
			background: #fff;
			border:1px #dbdbdb solid;
			border-top:none;
			cursor: default;
			.accredit,.stop,.del,.cancel,.recover{
				float: right;
				margin-left:20px;
			}
			.accredit{
				color: #FFC71A;
				&:hover{color: #FE920F;}
			}
			.stop,.recover,.cancel{
				color: #888;
				&:hover{color: #333;}
			}
		}
		.active{
			background: #FFEEC4;
		}
	}
}
